<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title>Google Picker Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script type="text/javascript">
      // The Browser API key obtained from the Google API Console.
      // Replace with your own Browser API key, or your own key.
      var developerKey = 'AIzaSyAWQsEw6VysIv18sFV5F5cemp5KgtVLXas'

      // The Client ID obtained from the Google API Console. Replace with your own Client ID.
      var clientId =
        '339501775929-kvbujf1332nle8etklpu2nst93nu9irf.apps.googleusercontent.com'

      // Replace with your own project number from console.developers.google.com.
      // See "Project number" under "IAM & Admin" > "Settings"
      var appId = '339501775929'

      // Scope to use to access user's Drive items.
      var scope = ['https://www.googleapis.com/auth/drive.file']

      var pickerApiLoaded = false
      var oauthToken

      // Use the Google API Loader script to load the google.picker script.
      function loadPicker() {
        gapi.load('auth', { callback: onAuthApiLoad })
        gapi.load('picker', { callback: onPickerApiLoad })
      }

      function onAuthApiLoad() {
        window.gapi.auth.authorize(
          {
            client_id: clientId,
            scope: scope,
            immediate: false,
          },
          handleAuthResult
        )
      }

      function onPickerApiLoad() {
        pickerApiLoaded = true
        createPicker()
      }

      function handleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token
          createPicker()
        }
      }

      // Create and render a Picker object for searching images.
      function createPicker() {
        if (pickerApiLoaded && oauthToken) {
          var view = new google.picker.DocsView()
          view.setMode(google.picker.DocsViewMode.LIST)
          view.setMimeTypes(
            [
              'application/zip',
              'application/x-zip-compressed',
              'application/x-rar-compressed',
              'application/vnd.rar',
              'application/octet-stream',
            ].join(',')
          )
          var picker = new google.picker.PickerBuilder()
            .setAppId(appId)
            .setOAuthToken(oauthToken)
            .addView(view)
            .setDeveloperKey(developerKey)
            .setCallback(pickerCallback)
            .build()
          picker.setVisible(true)
        }
      }

      // A simple callback implementation.
      function pickerCallback(data) {
        if (data.action == google.picker.Action.PICKED) {
          var fileId = data.docs[0].id
          selectedDocs = data.docs
          alert('The user selected: ' + fileId)
        }
      }
    </script>
  </head>
  <body>
    <div id="result"></div>

    <!-- The Google API Loader script. -->
    <script
      type="text/javascript"
      src="https://apis.google.com/js/api.js?onload=loadPicker"
    ></script>
  </body>
</html>
